<template>
    <div>
        <NoAuthPage v-showNoAuth="'D27-1'" :imgBoxStyle="{ height: '40vh', margin: '0' }" />
        <div v-userAuth="'D27-1'">
            <div style="display: flex;justify-content: space-between;">
                <a-button v-userAuth="'D27-2'" type='primary' @click="handleCreate">
                    <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                    {{ $t('创建本地用户') }}
                </a-button>
                <div style="display: flex;">
                    <div style="width: 150px;margin-top: 4px;">{{ $t('用户名称') }}：</div>
                    <a-input v-model="input" :placeholder="$t('Enter') + $t('用户名称')" />
                    <a-button type='primary' style="margin-left: 8px;" @click="handleSearch">
                        <Iconfont class="icon button-icon-style" type="icon-search16f"></Iconfont>
                        {{ $t('查询') }}
                    </a-button>
                </div>
            </div>
            <a-table style="margin-top:16px" class="bigstyle" rowKey="id" :columns='columns' :loading="loading"
                :dataSource='dataList' :locale="defaultSetting" :pagination='pagination' size='small' :scroll="{ x: 1340 }">
                <template slot="username" slot-scope="username">
                    <span>{{ username }}</span>
                </template>
                <template slot="group" slot-scope="group">
                    <span>-</span>
                </template>
                <template slot="operate" slot-scope='text, record'>
                    <div style="display: flex">
                        <a-tooltip placement='top'>
                            <template slot='title'>
                                <span>{{ $t('Change-pwd') }}</span>
                            </template>
                            <Iconfont v-userAuth="'D27-3'" class="icon table-operation-icon" type="icon-edit16f"
                                @click="handleEdit(record)"></Iconfont>
                        </a-tooltip>
                        <a-tooltip placement='top'>
                            <template slot='title'>
                                <span>{{ $t('Delete') }}</span>
                            </template>
                            <Iconfont v-userAuth="'D27-4'" class="icon table-operation-icon" type="icon-delete16f"
                                @click="handleDelete(record.username)"></Iconfont>
                        </a-tooltip>
                    </div>
                </template>
            </a-table>

            <createUser ref="createRef" @get-list="getList" />
            <modifyUser ref="modifyRef" @get-list="getList" />
        </div>
    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import createUser from './createUser.vue'
import modifyUser from './modifyUser.vue'
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    name: 'User',
    components: { EmptyData, createUser, modifyUser, NoAuthPage },
    data() {
        return {
            loading: false,
            dataList: [],
            copyList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '15', '20', '25'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                { title: this.$t('用户名称'), dataIndex: 'username', key: 'username', width: 160, fixed: 'left', scopedSlots: { customRender: 'username' } },
                { title: this.$t('所属用户组'), dataIndex: 'group', key: 'group', scopedSlots: { customRender: 'group' } },
                { title: this.$t('创建时间'), dataIndex: 'create_time', key: 'create_time' },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 160, fixed: 'right' }
            ],
            input: '',
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.samba.getSambaApi()
            this.dataList = data.samba_user
            this.copyList = data.samba_user
            this.loading = false
        },
        handleCreate() {
            this.$refs.createRef.isShow = true
        },
        handleEdit(item) {
            this.$refs.modifyRef.form = { ...item }
            this.$refs.modifyRef.form.user = item.username
            this.$refs.modifyRef.isShow = true
        },
        async handleDelete(user) {
            this.loading = true
            let _this = this
            this.$confirm({
                title: this.$t('删除本地用户'),
                content: this.$t('删除本地用户名为') + `${user}` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.samba.deleteSambaApi({ user })
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        },
        handleSearch() {
            this.loading = true
            const list = []; // 用于存放搜索出来数据的新数组
            if (this.input) {
                this.copyList.filter((item) => {
                    if (item.username.indexOf(this.input) !== -1) {
                        list.push(item);
                    }
                });
                this.dataList = list;
            } else {
                this.dataList = this.copyList
            }
            this.loading = false
        }
    }
}
</script>